import { Form, Input } from 'antd';
import { useNode } from '@craftjs/core';

export const Settings = () => {
  const {
    actions: { setProp },
    props,
  } = useNode((node) => ({ props: node.data.props }));

  return (
    <Form
      labelCol={{ span: 8 }}
      initialValues={{ ...props }}
      onValuesChange={(values) => {
        Object.entries(values).forEach(([key, value]) => {
          setProp((prop: any) => {
            prop[key] = value;
          });
        });
      }}
    >
      <Form.Item name="label" label="label">
        <Input placeholder="请输入 label" />
      </Form.Item>
      <Form.Item name="name" label="name">
        <Input placeholder="请输入 name" />
      </Form.Item>

      <Form.Item name="placeholder" label="placeholder">
        <Input placeholder="请输入 placeholder" />
      </Form.Item>
    </Form>
  );
};
